<template>
  <t-card :bordered='false'>
    <div class='table-tree-container'>
      <div class='list-tree-wrapper'>
        <div class='list-tree-operator'>
          <t-input
            v-model='filterText'
            @input='onInput'
            placeholder='请输入关键词'
          >
            <search-icon
              slot='suffix-icon'
              size='20px'
            />
          </t-input>
          <t-tree
            :data='items'
            hover
            :onClick='treeChange'
            expand-on-click-node
            :default-expanded='expanded'
            :filter='filterByText'
          />
        </div>
        <div class='list-tree-content'>
          <common-table ref='commonTable' />
        </div>
      </div>
    </div>
  </t-card>
</template>
<script>
import { SearchIcon } from 'tdesign-icons-vue'
import CommonTable from './table.vue'

export default {
  name: 'ListTree',
  components: {
    SearchIcon,
    CommonTable
  },
  data () {
    return {
      data: [],
      filterText: '',
      filterByText: null,
      options: [
        {
          label: '一级操作',
          value: '1'
        },
        {
          label: '二级操作',
          value: '2'
        }
      ],
      value: 'first',
      expanded: ['0', '0-0', '0-1', '0-2', '0-3', '0-4'],
      items: [
        {
          label: '广东地区',
          value: 1,
          children: [
            {
              label: '广州总部',
              value: '1-1',
              children: [
                {
                  label: '宠物店1',
                  value: '1-1-0'
                },
                {
                  label: '宠物店2',
                  value: '1-1-1'
                }
              ]
            },
            {
              label: '宠物店2',
              value: '1-2'
            }
          ]
        },
        {
          label: '北京地区',
          value: 2,
          children: [
            {
              label: '海淀区',
              value: '2-1',
              children: [
                {
                  label: '宠物店1',
                  value: '2-1-0'
                },
                {
                  label: '宠物店2',
                  value: '2-1-1'
                }
              ]
            }
          ]
        }
      ]
    }
  },

  methods: {
    onInput () {
      this.filterByText = (node) => {
        return node.label.indexOf(this.filterText) >= 0
      }
    },
    rehandleClickOp ({text, row}) {
      console.log(text, row)
    },
    treeChange (e) {
      // 通知子组件数据发送变化
      this.$refs.commonTable.initData()
      console.log(e.node.data.label)
    }
  }
}
</script>

<style lang='less' scoped>
@import '@/style/variables.less';

.table-tree-container {
  background-color: var(--td-bg-color-container);
  border-radius: var(--td-radius-default);

  .t-tree {
    margin-top: 24px;
  }
}

.list-tree-wrapper {
  overflow-y: hidden;
}

.list-tree-operator {
  width: 200px;
  float: left;
  padding: 10px 10px;
}

.list-tree-content {
  border-left: 1px solid var(--td-component-border);
  overflow: auto;
}
</style>
